<template>
    <div>
        <el-dialog :title="isAdd ? '添加活动' : '修改活动'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="seckForm" :rules="rules" ref="seckRef">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="seckForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <div class="block">
                        <!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker> -->
                        <el-date-picker v-model="timeArr" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.first_cateid" placeholder="请选择一级分类" @change="changeCate(false)">
                        <el-option v-for="item in cateList" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.second_cateid" placeholder="请选择二级分类" @change="changeGoods(false)">
                        <el-option v-for="item in children" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="seckForm.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in goodsArr" :key="item.id" :label="item.goodsname"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { seckAdd, seckInfo, seckEdit } from '../../request/api';
import { mapGetters, mapActions } from 'vuex';
export default {
    props: ['isAdd', 'isShow'],
    data() {
        return {
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
                ]
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            seckForm: {
                title: '',// 限时秒杀名称 
                begintime: '',// 开始时间 
                endtime: '', //结束时间 
                first_cateid: '',// 商品一级分类编号 
                second_cateid: '', //商品二级分类编号 
                goodsid: '', //商品编号 
                status: 1,// 状态   1正常2禁用 
            },
            formLabelWidth: '120px',
            timeArr: [],//活动时间
            children: [],//二级分类
            goodsArr: [],//商品列表
        }
    },
    methods: {
        ...mapActions({
            getSeckList: 'seck/getSecklistActiong',
            getGoosList: 'goods/goodsListAction',
            getCateList: 'cate/getCatelistAction',
        }),
        // 点击取消
        cancel() {
            this.$emit('cancel');
            this.reset();
            this.resetForm();
            this.timeArr = [];//清空时间
        },
        // 清空表单
        reset() {
            this.seckForm = {
                title: '',// 限时秒杀名称 
                begintime: '',// 开始时间 
                endtime: '', //结束时间 
                first_cateid: '',// 商品一级分类编号 
                second_cateid: '', //商品二级分类编号 
                goodsid: '', //商品编号 
                status: 1,// 状态   1正常2禁用 
            }
        },
        // 清空表单验证
        resetForm() {
            this.$refs.seckRef.resetFields();
        },
        // 数据回显
        lookup(id) {
            seckInfo({ id }).then(res => {
                if (res.code == 200) {
                    // 获取成功
                    this.$message.success(res.msg);
                    this.seckForm = res.list;
                    this.seckForm.id = id
                    // 处理时间格式  后台返回的是字符串的时间戳  要将数据转成number并转为中国标准时间
                    this.seckForm.begintime = new Date(Number(this.seckForm.begintime));
                    this.seckForm.endtime = new Date(Number(this.seckForm.endtime));
                    // console.log(this.seckForm);
                    // 数据回显时间
                    this.timeArr = [this.seckForm.begintime, this.seckForm.endtime];
                    this.changeCate(true);
                    this.changeGoods(true);
                    // console.log(this.timeArr);
                } else {
                    // 获取失败
                    this.$message.error(res.msg);
                }
            })
        },
        // 添加
        add() {
            this.$refs.seckRef.validate(val => {
                if (val) {
                    this.seckForm.begintime = +new Date(this.timeArr[0]);
                    this.seckForm.endtime = +new Date(this.timeArr[1]);
                    // 添加
                    if (this.isAdd) {
                        seckAdd(this.seckForm).then(res => {
                            if (res.code == 200) {
                                // 添加成功
                                this.$message.success(res.msg);
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染视图
                                this.getSeckList();
                            } else {
                                // 添加失败
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        // 编辑
                        seckEdit(this.seckForm).then(res => {
                            if (res.code == 200) {
                                // 编辑成功
                                this.$message.success(res.msg);
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染视图
                                this.getSeckList();
                            } else {
                                // 编辑失败
                                this.$message.error(res.msg);
                            }
                        })
                    }

                }
            })
        },
        // 更改一级分类
        changeCate(tag) {
            // 根据一级分类id  获取二级分类
            // console.log(this.seckForm.first_cateid);
            // console.log(this.cateList);
            let index = this.cateList.findIndex(item => {
                return item.id == this.seckForm.first_cateid
            });
            // console.log(this.cateList[index]);
            if (this.cateList[index]!=undefined) {
                this.children = this.cateList[index].children;
            }
            if (!tag) {
                this.seckForm.second_cateid = '';
                this.seckForm.goodsid = '';
            }
        },
        // 更改二级分类  获取id  根据二级分类id查找所有商品
        changeGoods(tag) {

            this.goodsArr = this.goodsList.filter(item => {
                // console.log(item);
                // console.log(item.second_cateid,'数据库');
                return item.second_cateid == this.seckForm.second_cateid
            })
            // this.goodsArr = arr;
            // console.log(this.goodsArr);
            if (!tag) {
                this.seckForm.goodsid = '';
            }
        }
    },
    mounted() {
        if (this.cateList.length == 0) {
            this.getCateList();
        }
        if (this.goodsList.length == 0) {
            this.getGoosList();
        }
    },
    watch: {},
    computed: {
        ...mapGetters({
            goodsList: 'goods/getGoodsList',
            cateList: 'cate/getCateList'
        })
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>